<template>
<div>
    <!-- <textarea name="content" id="editor">
        &lt;p&gt;Here goes the initial content of the editor.&lt;/p&gt;
    </textarea> -->
    <ckeditor v-show="showEditor" :editor="editor" v-model="editorData" :config="editorConfig" @input="onEditorInput"></ckeditor>
</div>
</template>

<script>
import Alignment from '@ckeditor/ckeditor5-alignment/src/alignment';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';


export default {
    props: {
        value: {
            type: String,
            default: "<p>Content of the editor.</p>"
        }
    },
    data() {
        //ClassicEditor.builtinPlugins.push(Alignment)
        return {
            showEditor: false,
            editor: ClassicEditor,
            editorData: this.value,
            editorConfig: {
                //plugins: [ Alignment ],
                toolbar: {
                    items: [
                        'heading',
                        '|',
                        'bold',
                        'italic',
                        'link',
                        'bulletedList',
                        'numberedList',
                        'imageUpload',
                        'blockQuote',
                        'inserttable',
                        'undo',
                        'redo',
                        'alignment'
                    ]
                },
                image: {
                    toolbar: [
                        'imageStyle:full',
                        'imageStyle:side',
                        '|',
                        'imageTextAlternative'
                    ]
                },
                language: 'zh-cn'
            }
        }
    },
    methods: {
        onEditorInput(value) {
            this.$emit("input", value);
        }
    },
    mounted() {
        //ClassicEditor.builtinPlugins.push(Alignment)
        this.showEditor = true;
        // var temp = ClassicEditor
        // .create( document.querySelector( '#editor' ), {
        //         //plugins: [ Alignment ],
        //         toolbar: {
        //             items: [
        //                 'heading',
        //                 '|',
        //                 'bold',
        //                 'italic',
        //                 'link',
        //                 'bulletedList',
        //                 'numberedList',
        //                 'imageUpload',
        //                 'blockQuote',
        //                 'undo',
        //                 'redo',
        //                 'alignment'
        //             ]
        //         },
        //         image: {
        //             toolbar: [
        //                 'imageStyle:full',
        //                 'imageStyle:side',
        //                 '|',
        //                 'imageTextAlternative'
        //             ]
        //         },
        //         language: 'zh-cn'
        // } )
        // .then( editor => {
        //     console.log( editor );
        // } )
        // .catch( error => {
        //     console.error( error );
        // } );
        //console.log(temp);
        //console.log(ClassicEditor)
    }
}
</script>

<style>

</style>
